<template>
	<view class="tn-safe-area-inset-bottom">
		<view class="tn-bg-white tn-padding-lg">
			<tn-swiper :height="360" :list="swiperList" name="url"></tn-swiper>
		</view>
		<view class="tn-padding-left-lg tn-padding-right-lg tn-bg-white tn-flex tn-flex-wrap tn-flex-row-between">
			<view class="nav_bg nav_item tn-shadow-warp tn-bg-red tn-flex tn-flex" @click="toPage(1)">
				<view class="">
					<view>在线考试</view>
					<view class="tn-text-sm tn-padding-top-xs tip">
						前往考试
						<text class="tn-icon-right tn-padding-left-xs"></text>
					</view>
				</view>
				<view class="tn-info-item-right">
					<view class="tn-icon-edit-form"></view>
				</view>
			</view>

			<view class="nav_bg nav_item tn-shadow-warp tn-bg-orange" @click="toPage(2)">
				<view class="">
					<view>课程学习</view>
					<view class="tn-text-sm tn-padding-top-xs tip">
						前往学习
						<text class="tn-icon-right tn-padding-left-xs"></text>
					</view>
				</view>
				<view class="tn-info-item-right">
					<view class="tn-icon-video-square"></view>
				</view>
			</view>
			<view class="nav_bg nav_item tn-shadow-warp tn-bg-purple" @click="toPage(3)">
				<view class="">
					<view>现场救援</view>
					<view class="tn-text-sm tn-padding-top-xs tip">
						前往救援
						<text class="tn-icon-right tn-padding-left-xs"></text>
					</view>
				</view>
				<view class="tn-info-item-right">
					<view class="tn-icon-taxi"></view>
				</view>
			</view>
			<view class="nav_bg nav_item tn-shadow-warp tn-bg-blue" @click="toPage(4)">
				<view class="">
					<view>查看更多</view>
					<view class="tn-text-sm tn-padding-top-xs tip">
						前往更多
						<text class="tn-icon-right tn-padding-left-xs"></text>
					</view>
				</view>
				<view class="tn-info-item-right">
					<view class="tn-icon-more-circle"></view>
				</view>
			</view>
		</view>

		<view class="tn-padding-left-lg tn-padding-right-lg" @click="jump('shuiyin')">
			<view style="width: 100%;">
				<view class="tn-shadow-blur image-piccapsule" :style="{backgroundImage: `url(${bg_1})`}">
					<view class="image-capsule"></view>
				</view>
			</view>
		</view>

		<view class="tn-bg-white tn-padding-left-lg tn-padding-right-lg tn-margin-top-lg">
			<uni-view class="tn-flex tn-flex-row-between tn-no-margin-top">
				<uni-view class="justify-content-item tn-text-bold tn-text-xl">
					<uni-text class="tn-icon-title"><span></span></uni-text>
					<uni-text><span>热门课程</span></uni-text>
				</uni-view>
				<uni-view class="justify-content-item tn-text-lg" @click="toPage(2)">
					<uni-text class="tn-padding-xs"><span>更多</span></uni-text>
					<uni-text class="tn-icon-right"><span></span></uni-text>
				</uni-view>
			</uni-view>

			<view class="tn-padding-bottom-sm">
				<block v-for="(item, index) in list" :key="index">
					<uni-card class="card" :isFull="true" @click="toDetail(item)">
						<image v-if="item.image" style="height: 150px; width: 100%" :src="item.image"></image>
						<image v-else src="/static/course_default.jpg" style="height: 150px; width: 100%"></image>
						<view class="tn-padding-sm tn-no-padding-top">
							<view class="tn-text-xl tn-text-bold" style="line-height: 25px;color: #3a3a3a">{{ item.name }}</view>
							<view class="_tit tn-color-gray">{{ item.content }}</view>
							<view class="_tit tn-color-gray time">{{ item.createTime }}</view>
						</view>
					</uni-card>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import demoTitle from '@/libs/components/demo-title.vue';
import { courselogPaging } from '@/api/training.js';
import { userList } from '@/api/login.js';
import bg_1 from '@/static/index/banner-tnui.png';
export default {
	name: 'basicTag',
	components: {
		demoTitle,
	},
	data() {
		return {
			bg_1,
			cardCur: '',
			list: [],
			swiperList: [
				{
					id: 0,
					type: 'image',
					url: '/static/banner/28887.jpg'
				},
				{
					id: 1,
					type: 'image',
					url: '/static/banner/banner2.jpg'
				},
				{
					id: 2,
					type: 'image',
					url: '/static/banner/banner3.jpg'
				}
			]
		};
	},
	onLoad() {
		this.load();
	},
	onShow(){
		this.getUserList();
	},
	methods: {
		toDetail({
			id
		}) {
			uni.navigateTo({
				url: '/pages/training/detail/detail?id=' + id
			})
		},
		getUserList() {
			userList({
				current: 1,
				size: 999
			}).then((res) => {
				const arr = [];
				res.data.records.forEach((item) => {
					arr.push({
						value: item.id,
						label: item.realName
					});
				});
				uni.setStorage({
					key:"USERLIST",
					data:arr
				})
			});
		},
		load() {
			courselogPaging({
				params: {},
				current: 1,
				size: 3
			}).then((res) => {
				if (res.code === 0) {
					this.list = res.data.records;
				}
			});
		},
		cardSwiper(e) {
			this.cardCur = e.detail.current;
		},
		jump(val){
			// uni.navigateTo({
			// 	url: `/pages/${val}/${val}`
			// });
		},
		toPage(val) {
      if (val === 1) {
        uni.switchTab({
          url: '/pages/exam/exam'
        });
      } else if (val === 2) {
        uni.switchTab({
          url: '/pages/training/training'
        });
      }
      if (val === 3) {
        uni.navigateTo({
          url: '/pages/rescue/rescue'
        });
      } else if (val === 4) {
        uni.navigateTo({
          url: '/pages/index/more'
        });
      }
    }
	}
};
</script>

<style lang="scss" scoped>
.basic-tag {
	// background-color: $tn-bg-gray-color;
}
._tit{
	font-size: 32rpx;
	line-height: 25px;

}
.time{
	font-size: 30rpx;
}
.nav_item {
	width: calc(50% - 20rpx);
	margin-bottom: 25rpx;
	padding: 36rpx 26rpx;
	border-radius: 6px;
	display: flex;
	align-items: center;
	color: white;
	.tip {
		color: hsla(0, 0%, 100%, 0.5);
	}
	.tn-info-item-right {
		position: absolute;
		right: 0px;
		top: 56rpx;
		font-size: 42px;
		width: 46px;
		height: 46px;
		text-align: center;
		line-height: 25px;
		opacity: 0.3;
	}
}
.icon {
	padding: 16rpx;
	border-radius: 28rpx;
	background-color: darkblue;
	color: white;
	margin-right: 10rpx;
	font-size: 46rpx;
}
.nav_bg {
	background-image: url('/static/index/item-bg.png');
	background-size: 100% 100%;
}
.card {
	padding: 0px !important;
	margin: 0 !important;
	border-radius: 6px;
	margin-top: 15px !important;
	box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.07) !important;

	::v-deep {
		.uni-card__content {
			padding: 0 !important;
		}
		.uni-card__header {
			.uni-card__header-box {
				.uni-card__header-content-title {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
		.title {
			color: #333;
			line-height: 1.5em;
			font-size: 32rpx;
			font-weight: bold;
		}

		.value {
			color: $tn-color-gray;
		}
	}
}

.image-piccapsule {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	border-radius: 18rpx 18rpx 0 0;
	.image-capsule {
		padding: 100rpx 0px;
		font-size: 32rpx;
		font-weight: 300;
		position: relative;
	}
}
</style>
